<template>
    <div>
        <div slot="tip" class="panel panel-default panel-search">
            <el-form :inline="true">

                <el-form-item label="周期" prop="periodId">
                    <period-select
                        :fnChange="buildDataRanges"
                        ref="periodSelect"
                        v-model="page.query.param.periodId"
                        :clearable="true"
                    ></period-select>
                </el-form-item>

                <el-form-item label="日期">
                    <el-date-picker
                        style="width: 305px"
                        v-model="dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy年MM月dd日"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="类型" prop="overtimeType">
                    <el-select
                        :clearable="true"
                        v-model="page.query.param.overtimeType"
                        style="width: 160px"
                        @change="search"
                    >
                        <el-option
                            v-for="item in $dongxwDict.store.OVERTIMES_TYPES"
                            :key="item[0]"
                            :value="item[0]"
                            :label="item[1]"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" prop="departmentId">
                    <department-select
                        :fnChange="search"
                        v-model="page.query.param.departmentId"
                        :clearable="true">
                    </department-select>
                </el-form-item>
                <el-form-item label="员工" prop="employeeId">
                    <employee-select
                        :fnChange="search"
                        v-model="page.query.param.employeeId"
                        :departmentId="page.query.param.departmentId"
                        :clearable="true">
                    </employee-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" v-keycode="'ENTER'"
                    >查询
                    </el-button
                    >
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" plain @click="create">新增</el-button>
                    <!--<el-button plain @click="exportRecords">导出XLS</el-button>-->
                </el-form-item>
            </el-form>
        </div>
        <!--<v-toolbar type="alert" style="margin-left:-5px">-->

        <!--</v-toolbar>-->

        <div width="50%">
            <!--:click="clickRow"-->

            <v-table
                ref="table"
                :dblclick="edit"
                :page="page"
                :table-minheight="450"
                @dataloaded="onDataloaded"
            >
                <el-table-column
                    prop="overtimeType"
                    :sortable="true"
                    label="加班类型"
                    width="112"
                >
                    <template slot-scope="{ row }">
                        {{ DICT.OVERTIMETYPE[row.overtimeType] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="department"
                    :sortable="true"
                    label="部门"
                    width="120"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.department.name }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="workID"
                    :sortable="true"
                    label="工号"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.workID }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="employee"
                    :sortable="true"
                    label="员工"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.name }}
            </span>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                  prop="status"
                  :sortable="true"
                  label="状态"
                  width="100"
                >
                  <template slot-scope="{ row }">
                    {{ DICT.STATUS[row.status] }}
                  </template>
                </el-table-column> -->
                <el-table-column
                    prop="workday"
                    :sortable="true"
                    label="日期"
                    width="120"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ $dongxwDict.viewDate(row.workday) }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="week" :sortable="true" label="星期" width="80">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.week }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="segment"
                    :sortable="true"
                    label="段落"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.segment }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="sStart"
                    :sortable="true"
                    label="上班卡"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sStart }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="sEnd" :sortable="true" label="下班卡" width="80">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sEnd }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sStartNo"
                    :sortable="true"
                    label="上班免卡"
                    width="90"
                >
                    <template slot-scope="{ row }">
            <span :style="row.sStartNo ? 'color:red' : 'color:black'">
              {{ row.sStartNo ? "是" : "否" }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sEndNo"
                    :sortable="true"
                    label="下班免卡"
                    width="90"
                >
                    <template slot-scope="{ row }">
            <span :style="row.sEndNo ? 'color:red' : 'color:black'">
              {{ row.sEndNo ? "是" : "否" }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="hStandard"
                    :sortable="true"
                    label="标准工时"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.hStandard }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="hMinus"
                    :sortable="true"
                    label="扣除工时"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.hMinus }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="overDay"
                    :sortable="true"
                    label="是否跨天"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span :style="row.overDay ? 'color:red' : 'color:black'">
              {{ row.overDay ? "是" : "否" }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="classFlag"
                    :sortable="true"
                    label="排班标识"
                    width="90"
                >
                    <template slot-scope="{ row }">
            <span :style="row.classFlag ? 'color:red' : 'color:black'">
              {{ row.classFlag ? "是" : "否" }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="cardSystem"
                    :sortable="true"
                    label="打卡系统"
                    width="111"
                >
                    <template slot-scope="{ row }">
                        {{ DICT.CARDSYSTEM[row.cardSystem] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    :sortable="true"
                    label="创建时间"
                    width="140"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.createdAt }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="操作" :fixed="'right'">
                    <template slot-scope="scope">
                        <el-button type="text" title="编辑" @click="edit(scope.row)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                        <el-button
                            type="text"
                            @click="del(scope.row, scope.$index)"
                            title="删除"
                        >
              <span style="color: red">
                <i class="el-icon-delete red"></i
                ></span>
                        </el-button>
                    </template>
                </el-table-column>
            </v-table>
        </div>
        <v-dialog ref="formDiag" :width="'720px'" title="信息编辑">
            <form-panel @saved="onFormSaved"></form-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
                >保存
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formDiag.hide();
            }
          "
                >取消
                </el-button
                >
            </div>
        </v-dialog>

        <v-dialog ref="formMakeDiag" :width="'720px'" title="排班">
            <make-form-panel @saved="onMakeFormSaved"></make-form-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formMakeDiag.dispatch('submit')"
                >排 班
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formMakeDiag.hide();
              $nextTick(search);
            }
          "
                >关闭
                </el-button
                >
            </div>
        </v-dialog>
    </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
    color: green;
}
</style>

<script>
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";

import PeriodSelect from "@/components/widgets/attend/PeriodSelect.vue";
import ClassMasterSelect from "@/components/widgets/attend/ClassMasterSelect.vue";

import FormPanel from "./Form";
import MakeFormPanel from "./MakeForm";

export default {
    components: {
        DepartmentSelect,
        EmployeeSelect,
        ClassMasterSelect,
        PeriodSelect,
        FormPanel,
        MakeFormPanel,
    },
    props: {
        fatherMethodShowSub: {
            type: Function,
            default: null,
        },
    },
    data() {
        return {
            DICT: {
                STATUS: {
                    10: "10--草稿",
                    20: "20--审核中",
                    30: "30--审核不过",
                    40: "40--审核不过终止",
                    50: "50--审核通过",
                },
                OVERTIMETYPE: {
                    20: "21--自动算",
                    21: "21--平时加班",
                    22: "22--周末加班",
                    23: "23--节假日加班",
                },
                CARDSYSTEM: {
                    10: "10--本系统",
                    20: "20--钉钉倒入",
                    30: "30--企业微信",
                    40: "40--打卡数据同步",
                },
            },
            dateRange: [],
            formStatus: 1,
            summaryMap: {},

            page: {
                query: {
                    orderBys: "departmentId|asc,employeeId|asc,createdAt|desc",
                    param: {
                        status: 50,
                        departmentId: null,
                        periodId: null,
                        period: {},
                        isDeleted: false,
                    },
                },
                getData: this.$api.attend.attend.EmployeeOvertimeService.query,
            },
            tableActions: [
                {
                    name: "编辑",
                    handle: this.edit,
                },
                {
                    name: "删除",
                    handle: this.del,
                    style: "color:red",
                },
            ],
        };
    },
    computed: {},

    methods: {
        onDataloaded(rsp) {
        },
        /*
                导出
                 */
        exportRecords() {
            let params = _.cloneDeep(this.getSearchParams());
            params.param.parentId = null;
            this.$api.attend.attend.EmployeeOvertimeService.export(params);
        },

        create() {
            this.$refs.formDiag.show({
                departmentId: this.page.query.param.departmentId,
            });
        },
        createMake() {
            this.$refs.formMakeDiag.show();
        },
        edit(row) {
            this.$refs.formDiag.show({overtimeId: row.overtimeId});
        },

        del(row) {
            this.$confirm("确定删除此记录吗?", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.attend.attend.EmployeeOvertimeService.deleteById(
                    row.overtimeId
                ).then((rsp) => {
                    this.$msgJsonResult(rsp);
                    this.search();
                });
            });
        },

        onMakeFormSaved() {
            this.$refs.formMakeDiag.hide();
            this.$nextTick(this.search);
        },

        onFormSaved() {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            if (options.overtimeId) {
                this.overtimeId = options.overtimeId;
            }
            this.search();
        },
        getSearchParams() {
            this.page.query.dateRanges = {};
            if (this.dateRange && this.dateRange.length > 0) {
                this.page.query.dateRanges["workday"] = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
                };
            }
            return this.page.query;
        },

        buildDataRanges() {
            if (this.page.query.param.periodId != null) {
                this.$api.attend.attend.PeriodService.findById(
                    this.page.query.param.periodId
                ).then((r) => {
                    //console.log(JSON.stringify(r));
                    if (r.data != null) {
                        this.dateRange = [r.data.startDay, r.data.endDay];
                        this.getSearchParams();
                        //  console.log(JSON.stringify(this.page.query));
                        this.$refs.table.load();
                        return;
                    }
                });
            }
        },
        search() {
            this.getSearchParams();
            //  console.log(JSON.stringify(this.page.query));
            this.$refs.table.load();
            //this.$refs.tablesub.load();
        },
        cancel() {
            this.dateRange = [];

            this.page.query.param = {
                isDeleted: false,
            };
            this.search();
        },

        clickRow(row) {
            this.row = row; // console.log(JSON.stringify(row));
            if (this.fatherMethodShowSub) {
                this.fatherMethodShowSub(row);
            }
        },
    },

    created() {
    },
    mounted() {
        this.$on("init", this.init);
    },
};
</script>
